<template>
	<div>

		<!--网页内容-->
		<div class='container'>
			<h2>游戏作品</h2>
			<ul class='sort'>
				<li><a>按点赞数</a></li>
				<li><a>按评分</a></li>
			</ul>
			<div class='list'>
				<figure v-for="item in game" @click='godetail(item._id)'>
					<strong class="title">{{item.title}}</strong>
					<span class="author">{{item.author}}</span>
					<img class='showImg' v-bind:src="getCoverUrl(item.coverImg_url)" alt="">
					<figcaption>
						<div class="info">
							<p class='sign'>
								<a href="javascript:" class="icon siIcon"></a><span>{{item.sign}}</span></p>
							<p class='like'>
								<a href="javascript:" class="icon liIcon"></a><span>{{item.likes.length}}</span></p>
							<p class='star'>
								<a href="javascript:" class="icon stIcon"></a><span>{{getstar(item.stars)}}</span></p>
						</div>
					</figcaption>
				</figure>


			</div>
			<span class="page_bottom">
	           		<div class="pg">
			            <strong>1</strong>
			            <a href='javascript:void(0)'>2</a>
			            <a href='javascript:void(0)'>3</a>
			            <a href='javascript:void(0)'>4</a>
			            <a href='javascript:void(0)'>5</a>
			            <a href='javascript:void(0)' class="last">... 10</a>
		           		<a href='javascript:void(0)' class="nxt">下一页</a>
		            </div>
	        	</span>
		</div>

	</div>

</template>

<script>
	import $ from "jquery";
	export default {
		name: 'footer',
		created() {
			require('../../assets/js/user.js')($);
			this.$store.dispatch({
				type: "getAndDelMethod",
				method: "get",
				url: '/api/pro',
				params: {
					conditions: '{"column":2}',
				},
				callback: (result) => {
					// console.log(result)
					this.game = result.body.data;
					// console.log(this.newmedia)

				}
			})

		},
		data() {
			return {
				game: [],
			}
		},
		methods: {
			getCoverUrl(data) {
				return this.$store.state.ip + data;
			},
			godetail(_id) {
				this.$router.push({
					path: '/detail/',
					query: {
						_id: _id,
					}
				});
			},
			getstar(star) {
				let sum = 0;
				for (let i = 0; i < star.length; i++) {
					sum = sum + star[i].count;
				}
				return Math.ceil(sum / star.length) ? Math.ceil(sum / star.length) : 0;
			}
		}
	}

</script>


<style scoped>
	@import '../../assets/css/proList.css';
</style>